<template>
	<view>
		<view class="tipsHead">
			<text class="frame"></text>
			<text class="tipsfont">我的推广码</text>
		</view>
		<view class="headInfo">
			<image class="photo" :src="userget.member_avatar"></image>
			<text class="name">{{userget.member_name}}</text>
			<text class="id">ID:{{userget.member_id}}</text>
			<text class="share">立即分享</text>
			<image class="rightjt" src="/static/user2/rightjt.png"></image>
		</view>
		<view class="tipsHead">
			<text class="frame"></text>
			<text class="tipsfont">我的团队</text>
		</view>
		<view class="main">
			<view class="mainHead">
				<view class="circule">
					<text class="circuleFont">直属下级</text>
					<text class="circulenum">{{number_get.spread_amount_level1}}人</text>
				</view>
				<view class="circule">
					<text class="circuleFont">团队人数</text>
					<text class="circulenum">{{number_get.spread_amount}}人</text>
				</view>
				<view class="circule">
					<text class="circuleFont">贡献值</text>
					<text class="circulenum">{{number_get.team_contribution}}</text>
				</view>
			</view>
			<view class="mt30" style="display: flex;justify-content: space-between;flex-wrap: wrap;padding: 0 20rpx;">
				
				<view class="subordinateBoxa" v-for="(item,index) in xiashu1" :key="index" @click="gotiem(item)">
					<image class="columnar" src="/static/user2/zhuzhuang.png"></image>
					<text class="xiashu">{{item.title}}</text>
					<view class="number diandiandian">
						{{item.renshu}}人
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Require from '@/common/require.js';
	export default {
		data() {
			return {
				userget:'',
				number_get:'',
				xiashu1:[
					{title:'直属下级',
					id:'0',
					renshu:''
					},
					{title:'二级下属',
					id:'1',
					renshu:''
					},
					{title:'三级下属',
					id:'2',
					renshu:''
					},
					{title:'四级下属',
					id:'3',
					renshu:''
					},
					{title:'五级下属',
					id:'4',
					renshu:''
					},
				],
			};
		},
		onLoad() {
			this.get_user()
		},
		methods:{
			gotiem(item){
				console.log(item.id)
				uni.navigateTo({
					url:"./teamMembers?id=" + item.id
				})
			},
			get_user(){
				var self=this
				Require.commonRequest({
					url: '/api/team/component',
					data: {
					},
					success: function(ret) {
						if(ret.data.code==200){
							console.log(ret.data.data)
							self.userget=ret.data.data.member
							self.number_get=ret.data.data
							self.xiashu1[0].renshu=ret.data.data.spread_amount_level1
							self.xiashu1[1].renshu=ret.data.data.spread_amount_level2
							self.xiashu1[2].renshu=ret.data.data.spread_amount_level3
							self.xiashu1[3].renshu=ret.data.data.spread_amount_level4
							self.xiashu1[4].renshu=ret.data.data.spread_amount_level5
						}else{
							uni.showToast({
								icon: "none",
								title: ret.data.msg
							})
						}
					},
					fail: function() {
						uni.showToast({
							icon: "none",
							title: "网络异常，请稍后再试"
						})
					}
				})
			},
			goteam(){
				uni.navigateTo({
					url:'./teamMembers'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F1F1F1;
	}

	.tipsHead {
		width: 710rpx;
		height: 90rpx;
		display: flex;
		align-items: center;
		margin-left: 20rpx;
	}

	.frame {
		width: 10rpx;
		height: 30rpx;
		background: rgba(115, 34, 216, 1);
		border-radius: 5rpx;
	}

	.tipsfont {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		margin-left: 12rpx;
		margin-top: -4rpx;
	}

	.headInfo {
		width: 710rpx;
		height: 120rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 10rpx;
		margin-left: 20rpx;
		position: relative;
	}

	.photo {
		width: 80rpx;
		height: 80rpx;
		position: absolute;
		top: 20rpx;
		left: 20rpx;
	}

	.name {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		position: absolute;
		top: 15rpx;
		left: 115rpx;
	}

	.id {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(142, 142, 142, 1);
		position: absolute;
		bottom: 18rpx;
		left: 115rpx;
	}

	.share {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(46, 46, 46, 1);
		position: absolute;
		right: 45rpx;
		top: 44rpx;
	}

	.rightjt {
		width: 14rpx;
		height: 22rpx;
		position: absolute;
		right: 20rpx;
		top: 48rpx;
	}

	.main {
		width: 710rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 10rpx;
		margin-left: 20rpx;
		position: relative;
	}

	.mainHead {
		width: 670rpx;
		height: 240rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 0rpx 18rpx 2rpx rgba(115, 34, 216, 0.1);
		border-radius: 20rpx;
		position: relative;
		top: 30rpx;
		left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.circule {
		width: 180rpx;
		height: 180rpx;
		background: rgba(255, 255, 255, 1);
		border: 10rpx solid #264FD2;
		box-shadow: 0rpx 2rpx 18rpx 2rpx rgba(115, 34, 216, 0.2);
		border-radius: 50%;
		display: flex;
		justify-content: center;
	}

	.circuleFont {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		position: absolute;
		top: 80rpx;
	}

	.circulenum {
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: rgba(115, 34, 216, 1);
		position: absolute;
		bottom: 70rpx;
	}

	.subordinateBoxa {
		width: 325rpx;
		height: 180rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 0rpx 18rpx 2rpx rgba(115, 34, 216, 0.1);
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		position: relative;
	}
	

	.subordinateBoxb {
		width: 325rpx;
		height: 180rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 0rpx 18rpx 2rpx rgba(115, 34, 216, 0.1);
		border-radius: 20rpx;
		position: absolute;
		top: 300rpx;
		right: 20rpx;
	}

	.subordinateBoxc {
		width: 325rpx;
		height: 180rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 0rpx 18rpx 2rpx rgba(115, 34, 216, 0.1);
		border-radius: 20rpx;
		position: absolute;
		bottom: 30rpx;
		left: 20rpx;
	}

	.subordinateBoxd {
		width: 325rpx;
		height: 180rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 0rpx 18rpx 2rpx rgba(115, 34, 216, 0.1);
		border-radius: 20rpx;
		position: relative;
		position: absolute;
		bottom: 30rpx;
		right: 20rpx;
	}
	.columnar{
		width: 86rpx;
		height: 96rpx;
		position: absolute;
		top: 60rpx;
		left: 26rpx;
	}
	.xiashu{
		font-size:30rpx;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(51,51,51,1);
		position: absolute;
		top: 50rpx;
		right: 38rpx;
	}
	.number{
		width: 135rpx;
		height:34rpx;
		font-size:26rpx;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(115,34,216,1);
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		bottom: 56rpx;
		right:18rpx;
	}
</style>
